<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改分类' : '添加分类'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-form-item label="分类名:" prop="name">
        <el-input clearable v-model="form.name" placeholder="请输入分类名" />
      </el-form-item>
      <el-row :gutter="15">
        <el-col :lg="12" :md="10">
          <el-form-item label="图标:" prop="img">
            <span slot="label">
              图标
              <el-tooltip placement="top">
                <div slot="content">
                  建议上传750px * 300px尺寸,或者等比例图片
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </span>

            <div class="ele-image-upload-list">
              <div
                class="ele-image-upload-item ele-image-upload-button"
                @click="modalPicTap('dan', 'img', '手机端图片')"
              >
                <div>
                  <div tabindex="0" class="el-upload el-upload--text">
                    <div class="el-upload-dragger">
                      <i class="el-icon-plus ele-image-upload-icon"></i>
                    </div>
                    <div
                      class="ele-image-upload-item"
                      style="margin: 0 0 0 0"
                      v-if="form.img != ''"
                    >
                      <div class="el-image">
                        <img
                          :src="form.img"
                          width="100%"
                          height="100%"
                          class="el-image__inner"
                          style="object-fit: cover"
                        />
                      </div>
                      <div
                        class="ele-image-upload-close"
                        @click="handleRemove('img')"
                        ><i class="el-icon-close"></i
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="排序号:" prop="sort">
        <el-input-number
          :min="0"
          v-model="form.sort"
          placeholder="请输入排序号"
          controls-position="right"
          class="ele-fluid ele-text-left"
        />
      </el-form-item>

      <el-form-item label="展示状态:">
        <el-switch
          :active-value="1"
          :inactive-value="2"
          v-model="form.status"
        />
        <el-tooltip placement="top" content="选择不可见则前端页面不显示该数据">
          <i
            class="el-icon-_question"
            style="vertical-align: middle; margin-left: 8px"
          ></i>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >保存
      </el-button>
    </template>
    <uploadPictures
      :isChoice="isChoice"
      :visible.sync="modalPic"
      @getPic="getPic"
      :gridBtn="gridBtn"
      :gridPic="gridPic"
      :title="modalTitle"
    ></uploadPictures>
  </ele-modal>
</template>

<script>
import PagesSearch from '@/views/common/pages/pages-search';
import uploadPictures from '@/components/uploadPictures';
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import TinymceEditor from '@/components/TinymceEditor';
import { add, update } from '@/api/classify';
import { getPages } from '@/api/layout';
const DEFAULT_FORM = {
  id: 0,
  name:'',
  img: '',
  status: 1,
  sort: 1
};

export default {
  name: 'BannerEdit',
  components: { PagesSearch, EleImageUpload, uploadPictures, TinymceEditor },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    pid: 0
  },
  data() {
    return {
      modalTitle: '选择图片',
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      // 表单数据
      form: { ...DEFAULT_FORM },
      // 表单验证规则
      rules: {
        title: [
          {
            required: true,
            message: '请输入轮播图标题',
            trigger: 'blur'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      tableConfig: {
        datasource: ({ page, limit, where, order }) => {
          return getPages({ ...where, ...order, page, limit });
        },
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center'
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            minWidth: 110
            //slot: 'nickname'
          },
          {
            prop: 'url',
            label: '路径',
            showOverflowTooltip: true,
            minWidth: 110
          }
        ],
        rowClickChecked: true,
        rowClickCheckedIntelligent: false,
        toolkit: ['reload', 'columns'],
        size: 'small',
        toolStyle: { padding: '0 10px' }
      }
    };
  },
  methods: {
    search(where) {
      // debugger
      this.$refs.select.reload({
        where: where,
        page: 1
      });
    },
    // 选择图片
    modalPicTap(tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      switch (this.picTit) {
        case 'img':
          this.form.img = pc.satt_dir;
          break;
        case 'pc_pic':
          this.form.pc_pic = pc.satt_dir;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove(field) {
      this.form[field] = '';
    },

    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.loading = true;
        const data = {
          ...this.form
        };

        data.page_id = this.pid;

        const saveOrUpdata = this.isUpdate ? update : add;

        saveOrUpdata(data)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.updateVisible(false);
            this.$emit('done', { page_id: this.pid });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  },
  watch: {
    visible(visible) {
      if (visible) {
        if (this.data) {
          this.$util.assignObject(this.form, {
            ...this.data
          });
          this.isUpdate = true;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
